<template>
  <div class="app-container">
    <el-descriptions class="descriptions-class" title="基本信息" :column="4" border>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="name-card" style="margin-right: 3px; width: 15px; height: 15px" />
          爬虫名称
        </template>
        {{ crawlerObj.codeName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="catalog" style="margin-right: 3px; width: 15px; height: 15px" />
          项目名称
        </template>
        {{ crawlerObj.projectName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="computer" style="margin-right: 3px; width: 15px; height: 15px" />
          服务器
        </template>
        {{ crawlerObj.machine }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="product" style="margin-right: 3px; width: 15px; height: 15px" />
          类路径
        </template>
        {{ crawlerObj.classpath }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="time" style="margin-right: 3px; width: 15px; height: 15px" />
          最近运行时间
        </template>
        {{ crawlerObj.lastTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="success" style="margin-right: 3px; width: 15px; height: 15px" />
          负责人
        </template>
        {{ crawlerObj.person }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="success" style="margin-right: 3px; width: 15px; height: 15px" />
          数据库
        </template>
        {{ crawlerObj.tableName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="success" style="margin-right: 3px; width: 15px; height: 15px" />
          网站地址
        </template>
        <a :href="crawlerObj.url" target="_blank" rel="noreferrer noopener nofollow" style="color: #328df3; text-decoration: underline">{{ crawlerObj.url }}</a>
      </el-descriptions-item>
    </el-descriptions>

    <el-row style="display: flex; justify-content: space-between; margin-bottom: 20px;">
      <el-col :span="1.5">
        <el-button
          ref="resetData"
          type="primary"
          icon="el-icon-refresh"
          size="mini"
          @click="resetData"
        >
          重置数据
        </el-button>
      </el-col>
      <el-col :span="1.5" style="display: flex; align-items: center;">
        <div style="display: flex; justify-content: space-between; width: 100%; line-height: 10px; align-items: center;">
          <el-input v-model="crawlerObj.scheduledName" :disabled="scheduledDisabled" size="small" suffix-icon="xxx" />
          <el-button v-if="loading" type="warning" size="mini" disabled style="margin-left: 10px; height: 30px">加载中...</el-button>
          <el-button
            v-else-if="scheduledButton"
            type="danger"
            size="mini"
            style="margin-left: 10px; height: 30px"
            @click="unupdateScheduledName"
          >
            解绑
          </el-button>
          <el-button
            v-else
            type="success"
            size="mini"
            style="margin-left: 10px; height: 30px"
            @click="updateScheduledName"
          >
            绑定
          </el-button>
          <span style="font-size: 16px; color:#999; display: inline-block; margin-left: 10px; white-space: nowrap;">
            (仅支持xxl-job)
          </span>
          <span>
            <el-button
              v-if="crawlerObj.scheduledId"
              ref="linkOut"
              type="info"
              plain
              size="mini"
              icon
              style="margin-left: 20px; font-size: 1px; line-height: 1px; padding: 4px; border-radius: 2px;"
              @click="linkOutForScheduled"
            >
              <svg-icon icon-class="link" style="margin-right: 5px; width: 10px; height: 10px" />
              查看日志
            </el-button>
          </span>
        </div>

      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      style="max-width: 100%; overflow-y: auto"
      :data="list"
      header-fixed
      max-height="550px"
      :header-cell-style="headStyle"
      :cell-style="cellStyle"
      :row-style="rowStyle"
    >
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="(column, index) in fieldList"
        :key="index"
        :prop="column"
        :label="column"
        width="200"
        show-overflow-tooltip
      />
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      background
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[10, 100, 500, 1000]"
      prev-text="上一页"
      next-text="下一页"
      style="padding: 30px 0; text-align: center"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="changePageSize"
      @current-change="changeCurrentPage"
    />

  </div>
</template>

<script>
import yejiApi from '@/api/crawler/yeji'
import variables from '@/styles/variables.scss'
import crawlerApi from '@/api/crawler/crawler'
export default {
  name: 'Yeji',
  data() {
    return {
      id: 0,
      total: 0, // 数据库总记录数
      page: 1, // 默认页码
      limit: 100, // 每页记录数
      loading: true,

      crawlerObj: { // 数据对象
        id: this.$route.params.id,
        codeName: '',
        projectName: '',
        machine: '',
        lastTime: '',
        person: '',
        classpath: '',
        remarks: '',
        scheduledId: '',
        scheduledName: '',
        url: '',
        tableName: ''
      },

      fieldList: [], // 列名list
      list: [], // 数据list
      scheduledDisabled: true,
      scheduledButton: true
    }
  },

  created() {
    if (this.$route.params.id) {
      this.id = this.$route.params.id
      this.fetchData()
    }
  },

  methods: {
    fetchData() {
      yejiApi.yejiDetail(this.id).then((response) => {
        this.crawlerObj = response.data.result
        this.scheduledDisabled = !!this.crawlerObj.scheduledName // 定时任务输入框是否启用修改
        this.scheduledButton = !!this.crawlerObj.scheduledName // 定时任务绑定解绑按钮的显示
        this.fetchList()
      })
    },

    fetchList() {
      this.loading = true
      // 获取表列名list
      yejiApi.yejiList(this.crawlerObj.tableName).then((response) => {
        this.fieldList = response.data.fieldList
      })

      // 获取表数据
      const formData = new FormData()
      formData.append('page', this.page)
      formData.append('limit', this.limit)
      formData.append('tableName', this.crawlerObj.tableName)
      yejiApi.yejiDataList(formData).then((response) => {
        this.list = response.data.list.list
        this.total = response.data.list.total
        this.loading = false
      })
    },

    // 绑定定时任务
    updateScheduledName() {
      if (!this.crawlerObj.scheduledName) {
        this.$message.warning('任务名称为空')
      } else {
        crawlerApi.updateScheduledName(this.id, this.crawlerObj.scheduledName, this.crawlerObj.machine).then((response) => {
          if (response.code === 200) {
            this.$message({
              message: '绑定成功',
              type: 'success'
            })
            this.crawlerObj.scheduledId = response.data.scheduledId
            this.fetchData()
          }
        })
      }
    },

    // 解绑定时任务
    unupdateScheduledName() {
      this.$confirm('是否解绑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送解绑请求
        crawlerApi.unupdateScheduledName(this.id).then((response) => {
          if (response.code === 200) {
            this.$message({
              message: '解绑成功',
              type: 'success'
            })
            this.crawlerObj.scheduledName = ''
            this.fetchData()
          }
        })
      })
    },

    // 跳转定时任务链接
    linkOutForScheduled() {
      const outurl = 'http://192.168.1.221:8080/xxl-job-admin/joblog?jobId=' + this.crawlerObj.scheduledId
      window.open(outurl, '_blank')
      this.$nextTick(() => {
        this.$refs.linkOut.$el.blur()
      })
    },

    resetData() {
      this.page = 0
      this.limit = 100
      this.$nextTick(() => {
        this.$refs.resetData.$el.blur()
      })
      this.fetchList()
    },

    // 每页展示条数的改变，size：回调函数, 表示当前选中的展示条数
    changePageSize(size) {
      this.limit = size
      this.fetchData()
    },

    // 翻页，page：回调函数, 表示当前选中的页码
    changeCurrentPage(page) {
      this.page = page
      this.fetchData()
    },

    // 表头style
    headStyle() {
      return 'color: black; backgroundColor: ' + variables.globalStyle
    },

    // 列style
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // return 'height: 20px'
    },

    // 行style
    rowStyle({ row, column, rowIndex, columnIndex }) {
      return 'height: 20px'
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";
  .descriptions-class {
    margin-bottom: 30px;
  }
  ::v-deep .descriptions-class .el-descriptions-item__label.is-bordered-label {
    background: $global-style;
    color: black;
  }

</style>
<style>
  .custom-box {
    height: 900px;
    width: 1000px;
    overflow-y: auto;
    overflow-x: auto;
  }
  .dialog {
    width: 3000px;
    position: fixed;
    margin-left: -1450px;
    margin-top: -450px;
    left: 50%;
    top: 50%;
  }
  .right-toolbarClass {
    flex: 1;
    text-align: right;
  }

  .el-loading-mask {
    z-index: 1;
    /*background-color: rgb(255,255,255,0);*/
  }

</style>

